<template>
<div class="swiper">
  <van-swipe class="my-swipe" :autoplay="3000" @change="onswipeItemChange">
    <van-swipe-item v-for="(item,index) in img" :key="'swiperImg'+index" @click="onSwipeItemClick(index)">
<!--      <img :src=item>-->
      <van-image class="img" lazy-load :src=item>
        <template v-slot:loading>
          <van-loading type="spinner" size="40" />
        </template>
      </van-image>
    </van-swipe-item>
    <template #indicator>
      <div class="custom-indicator">
        {{ swipeItemIndex + 1 }}/{{img.length}}
      </div>
    </template>
  </van-swipe>
  <van-image-preview v-model="show" :images="this.img" :start-position="startPosition"/>
</div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Image as VanImage } from 'vant';
import { Lazyload } from 'vant';

import { ImagePreview } from 'vant';
import { Loading } from 'vant';
Vue.use(Loading);
Vue.use(ImagePreview);
Vue.use(Lazyload);
Vue.use(VanImage);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
name: "swiper",
  props:{
  img:{
    type:Array,
    default(){
      return []
    }
  }
  },
  data() {
    return {
      swipeItemIndex: 0,
      show: false,
      index: 0,
      startPosition:0
    };
  },
  methods: {
    onswipeItemChange(index) {
      this.swipeItemIndex = index;
    },
    onSwipeItemClick(index){
      this.startPosition=index
      this.show=true;
    }
  },
}
</script>

<style lang="less" scoped>
.img{
  width: 10rem;
  height: 10rem;
}
.my-swipe .van-swipe-item {

}
.custom-indicator {
  color: #fff;
  position: absolute;
  right: .1rem;
  bottom: .1rem;
  padding: .1rem .4rem;
  font-size: .4rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: .4rem;
}
</style>